<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>app聊天通讯</title>
  <meta name="description" content="Responsive, Bootstrap, BS4" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  
  <!-- style -->
  <!-- build:css ../assets/css/site.min.css -->
  <link rel="stylesheet" href="../assets/css/bootstrap.css" type="text/css" />
  <link rel="stylesheet" href="../assets/css/i-con.css" type="text/css" />
  <link rel="stylesheet" href="../assets/css/theme.css" type="text/css" />
  <link rel="stylesheet" href="../assets/css/style.css" type="text/css" />
  <!-- endbuild -->
</head>
<body class="layout-column" style="background: white;">

  <!-- ############ LAYOUT START-->
  <div id="main" class="layout-row flex">

    <!-- ############ Content START-->
    <div id="content" class="flex ">
      <!-- ############ Main START-->
      <div class="padding-0">
        <div class="row row-md" style="padding: 0; margin: 0;">
          <div class="col-md-12 masonry-item" style="padding: 0;">
            <div class="card" style="margin-bottom: 0;">

              <div id="aui-chats-box">

                <div class="card-body d-flex b-t">
                  <div class="right-arrow-x tail-rightbottom"></div>
                  <div class="mx-3 flex aui-c-msg-r-box">
                    <div class="mb-3 text-right">
                      <a href="#">烟熏色</a>
                      <div class="text-muted text-sm">8:10 pm</div>
                    </div>
                    <div class="card-text text-right">
                      <p>Varius vel potenti enim ante arcu laoreet ut nisl, accumsan vehicula egestas mattis nulla semper cras at</p>
                    </div>
                    <div class="row row-xs">
                      <div class="col-6 mb-2">
                        <div class="media media-2x1 r">
                          <a class="media-content" style="background-image: url(../assets/img/b1.jpg);"></a>
                        </div>
                      </div>
                      <div class="col-6 mb-2">
                        <div class="media media-2x1 r">
                          <a class="media-content" style="background-image: url(../assets/img/b6.jpg);"></a>
                        </div>
                      </div>
                      <div class="col-4">
                        <div class="media media-4x3 r">
                          <a class="media-content" style="background-image: url(../assets/img/b16.jpg);"></a>
                        </div>
                      </div>
                      <div class="col-4">
                        <div class="media media-4x3 r">
                          <a class="media-content" style="background-image: url(../assets/img/b18.jpg);"></a>
                        </div>
                      </div>
                      <div class="col-4">
                        <div class="media media-4x3 r">
                          <a class="media-content" style="background-image: url(../assets/img/b19.jpg);"></a>
                        </div>
                      </div>
                    </div>

                  </div>
                  <a href="#"><img src="../common/img/002.jpg" class="avatar w-40"></a>

                </div>


                <div class="card-body d-flex b-t">
                  <div class="left-arrow-x tail-leftbottom"></div>

                  <a href="#"><img src="../common/img/002.jpg" class="avatar w-40"></a>
                  <div class="mx-3 flex aui-c-msg-l-box">
                    <div class="mb-3">
                      <a href="#">烟熏色</a>
                      <div class="text-muted text-sm">8:10 pm</div>
                    </div>
                    <div class="card-text">
                      <p>Faucibus diam ultricies malesuada mi ut nullam facilisis</p>
                    </div>
                  </div>
                </div>
                <div class="card-body d-flex b-t">
                  <div class="left-arrow-x tail-leftbottom"></div>

                  <a href="#"><img src="../common/img/002.jpg" class="avatar w-40"></a>
                  <div class="mx-3 flex aui-c-msg-l-box">
                    <div class="mb-3">
                      <a href="#">烟熏色</a>
                      <div class="text-muted text-sm">11:10 pm</div>
                    </div>
                    <div class="row row-xs">
                      <div class="col-6">
                        <div class="media media-16x9 r">
                          <a class="media-content media-16x9" style="background-image: url(../assets/img/b5.jpg);"></a>
                        </div>
                      </div>
                      <div class="col-6">
                        <div class="media media-16x9 r">
                          <a class="media-content media-16x9" style="background-image: url(../assets/img/b8.jpg);"></a>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="card-body d-flex b-t">
                  <div class="right-arrow-x tail-rightbottom"></div>

                  <div class="mx-3 flex aui-c-msg-r-box">
                    <div class="mb-3 text-right">
                      <a href="#">繁华年间</a>
                      <div class="text-muted text-sm">16:10 pm</div>
                    </div>

                    <div class="card-text">
                      <p>Faucibus diam ultricies malesuada mi ut nullam facilisis</p>
                    </div>
                    <div class="row row-xs">
                      <div class="col-6">
                        <div class="media media-16x9 r">
                          <a class="media-content media-16x9" style="background-image: url(../assets/img/b5.jpg);"></a>
                        </div>
                      </div>
                      <div class="col-6">
                        <div class="media media-16x9 r">
                          <a class="media-content media-16x9" style="background-image: url(../assets/img/b8.jpg);"></a>
                        </div>
                      </div>
                    </div>

                  </div>
                  <a href="#"><img src="../common/img/004.jpg" class="avatar w-40"></a>
                </div>

              </div>

              <div class="p-3 b-t collapse show" id="feed-form-1">
                <form>
                  <textarea class="form-control" rows="3" placeholder="请输入内容..."></textarea>
                  <div class="d-flex pt-2">
                    <div class="toolbar mt-1">
                      <a href="#" class="text-muted mx-1 i-con-h-a"><i class="i-con i-con-photo"><i></i></i></a>
                      <a href="#" class="text-muted mx-1 i-con-h-a"><i class="i-con i-con-video"><i></i></i></a>
                      <a href="#" class="text-muted mx-1 i-con-h-a"><i class="i-con i-con-pin"><i></i></i></a>
                      <a href="#" class="text-muted mx-1 i-con-h-a"><i class="i-con i-con-attachment"><i></i></i></a>
                      <a href="#" class="text-muted mx-1 i-con-h-a"><i class="i-con i-con-smile"><i></i></i></a>
                    </div>
                    <span class="flex"></span>
                    <button class="btn btn-sm btn-primary">发送</button>
                  </div>
                </form>
              </div>
            </div>
          </div>

        </div>

      </div>
      <!-- ############ Main END-->
    </div>
    <!-- ############ Content END-->

  </div>
  <!-- ############ LAYOUT END-->


  <!-- build:js ../assets/js/site.min.js -->
  <!-- jQuery -->
  <script src="../libs/jquery/dist/jquery.min.js"></script>
  <!-- Bootstrap -->
  <script src="../libs/popper.js/dist/umd/popper.min.js"></script>
  <script src="../libs/bootstrap/dist/js/bootstrap.min.js"></script>
  <!-- ajax page -->
  <script src="../libs/pace-progress/pace.min.js"></script>
  <script src="../libs/pjax/pjax.js"></script>
  <script src="../assets/js/ajax.js"></script>
  <!-- lazyload plugin -->
  <script src="../assets/js/lazyload.config.js"></script>
  <script src="../assets/js/lazyload.js"></script>
  <script src="../assets/js/plugin.js"></script>
  <!-- theme -->
  <script src="../assets/js/theme.js"></script>
  <!-- endbuild -->
</body>

<script type="text/javascript">
  
</script>

</html>
